.vx-dashboard{
    padding: 22px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.vx-dash-header h1{ margin:0; font-size:28px; font-weight:800; }
.vx-dash-header p{ margin:6px 0 0; color:#6b7280; }

/* KPIs */
.vx-kpis{
  margin-top: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
    gap: 16px !important;
}

@media (max-width: 1200px){
    .vx-kpis{ grid-template-columns: repeat(2, minmax(240px, 1fr)) !important; }
}
@media (max-width: 640px){
    .vx-kpis{ grid-template-columns: 1fr !important; }
}

.vx-kpi{
    text-decoration:none !important;
    color: inherit !important;
    border-radius: 16px !important;
    padding: 18px !important;
    border: 1px solid rgba(17,24,39,.06) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
    background: #fff !important;
    display: block !important;
    min-height: 118px;
}
.vx-kpi:hover{ transform: translateY(-2px) !important; box-shadow: 0 16px 40px rgba(0,0,0,.10) !important; }

.vx-kpi-top{
    display:flex !important;
    align-items:center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
.vx-kpi-title{ font-size:14px; color:#6b7280; }
.vx-kpi-ico{
    width: 38px; height: 38px;
    display:flex; align-items:center; justify-content:center;
    border-radius: 12px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.65);
}

.vx-kpi-value{
    margin-top: 12px;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.5px;
}
.vx-kpi-sub{
    margin-top: 6px;
    font-size: 13px;
}

/* variações por cor (estilo da imagem) */
.vx-kpi--green{ background: linear-gradient(135deg, #e8faf3, #ffffff) !important; }
.vx-kpi--orange{ background: linear-gradient(135deg, #fff4e6, #ffffff) !important; }
.vx-kpi--blue{ background: linear-gradient(135deg, #e8f4ff, #ffffff) !important; }
.vx-kpi--purple{ background: linear-gradient(135deg, #f2efff, #ffffff) !important; }

/* grid inferior */
.vx-grid{
    margin-top: 18px !important;
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
}

@media (max-width: 1100px){
    .vx-grid{ grid-template-columns: 1fr !important; }
}

.vx-panel{
    background:#fff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(17,24,39,.06) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
    padding: 14px !important;
}

.vx-panel-head{
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: 10px;
    padding: 6px 4px 12px;
    border-bottom: 1px solid rgba(17,24,39,.06);
    margin-bottom: 12px;
}

.vx-panel-title{ display:flex; align-items:center; gap: 10px; }
.vx-panel-badge{
    width: 34px; height: 34px;
    border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    background: #eef6ff;
}

.vx-link{ text-decoration:none; color:#6b7280; font-weight:600; }
.vx-link:hover{ color:#111827; }

/* charts */
.vx-chart{ width:100%; height: 320px; }
.vx-chart-empty{ display:none; text-align:center; padding: 50px 10px; }
.vx-empty-ico{ font-size: 34px; }
.vx-empty-title{ margin-top: 8px; font-weight:800; color:#374151; }
.vx-empty-sub{ margin-top: 4px; color:#6b7280; font-size: 13px; }

/* atividades */
.vx-activity{
    display:flex; gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(17,24,39,.02);
    margin-bottom: 10px;
}
.vx-dot{ width:10px; height:10px; border-radius:999px; margin-top: 6px; }
.vx-dot--blue{ background:#3b82f6; }
.vx-dot--green{ background:#22c55e; }
.vx-dot--orange{ background:#f59e0b; }

.vx-act-title{ font-weight:800; color:#111827; font-size: 14px; }
.vx-act-sub{ color:#6b7280; font-size: 13px; margin-top: 2px; }